<!doctype html>
<html lang="{{.Conf.Lang}}">
    <head>
        <meta charset="utf-8" />
        <title>{{.Blog.Meta.Title}} | {{.Conf.Title}}</title>
        <meta
            name="keywords"
            content="{{range .Blog.Meta.Tags}}{{.}},{{end}}"
        />
        <meta name="description" content="{{.Blog.Meta.Title}}" />
        {{template "_head.html" .}}
        <link rel="stylesheet" href="{{.UrlPre}}/static/css/dracula.css" />
    </head>
    <body>
        <div id="app">
            <div
                class="bg-gradient-primary"
                style="position: sticky; top: 0; z-index: 2333; height: 3px"
            ></div>
            {{template "_topbar.html" .}}

            <div class="container-fluid pl-0 documentation is-dark">
                <div class="row">
                    <div
                        class="col-12 col-md-3 sidebar"
                        :class="[{'is-hidden': ! sidebar}, {'is-dark': forceDarkSidebar}, {'is-light': forceLightSidebar}]"
                    >
                        <ul id="sidebar"></ul>
                    </div>

                    <div
                        class="col-12 col-md-9 article"
                        :class="{'expanded': ! sidebar}"
                    >
                        <a href="{{.UrlPre}}/{{.Blog.Archive.Url}}">
                            <h1 class="post-title">{{.Blog.Meta.Title}}</h1>
                        </a>

                        <p class="post-meta">
                            {{if .Blog.Meta.Author}}
                            <img
                                width="32"
                                height="32"
                                alt="{{.Blog.Author.ID}}"
                                class="post-avatar"
                                src="{{.UrlPre}}/{{.Blog.Author.Avatar}}"
                            />
                            <a class="post-author" href="#"
                                >{{.Blog.Author.Name}}</a
                            >
                            {{end}} at
                            <a class="post-date" href="#"
                                >{{.Blog.Meta.Date}}</a
                            >
                            under {{$urlpre := .UrlPre}}
                            <span class="tags"
                                >{{range $tag := .Blog.Meta.Tags}}
                                <a
                                    class="post-tag"
                                    href="{{$urlpre}}/tags/{{$tag}}.html"
                                    >{{$tag}}</a
                                >
                                {{end}}</span
                            >
                        </p>

                        <hr />
                        {{.Blog.Content}}
                        <hr />
                    </div>
                </div>
            </div>

            <larecipe-back-to-top></larecipe-back-to-top>
        </div>

        <script src="{{.UrlPre}}/static/js/bundle.js"></script>
        <script src="{{.UrlPre}}/static/js/app.js"></script>
        <script src="{{.UrlPre}}/static/js/highlight.js"></script>
        <script type="text/javascript">
            loadSidebar("{{.UrlPre}}");
            hljs.initHighlightingOnLoad();
        </script>
    </body>
</html>
